<template>
	<up-navbar title="个人中心" bgColor="transparent">
		<template #left>
			<view class="u-nav-slot">

			</view>
		</template>
	</up-navbar>
	<view class="head-wrap">
		<image src="http://106.53.65.140:8080/upload/2179728a-4e14-47ad-8531-60c91d819715.png" mode="scaleToFill"
			class="bg" />
		<view class="head-wrap-info">
			<view class="head-wrap-info-content">
				<view class="head-wrap-info-content-info_wrap">
					<view class="head-wrap-info-content-info_wrap-avatar" v-if="state.token">
						<image :src="state.info.avatar" mode="scaleToFill" style="width: 100%;height: 100%;" />
					</view>
					<view class="head-wrap-info-content-info_wrap-name" v-if="state.token">{{ state.info.userName }}
					</view>
					<view class="head-wrap-info-content-info_wrap-action" v-else @click="openLogin">登录/注册</view>
				</view>
			</view>
		</view>
	</view>
	<view class="content">
		<view class="account-wrap"></view>
		<view class="account-other-wrap">
			<view class="account-other-wrap-list">
				<view class="account-other-wrap-list-item" v-for="(item,index) in list1" :key="index"
					@click="click(item)">
					<image :src="item.icon" mode="scaleToFill" class="account-other-wrap-list-item-img" />
					<view class="account-other-wrap-list-item-text">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="account-other-features-wrap">
			<view class="area">
				<view class="line"></view>
				<text class="text">其他功能</text>
			</view>
			<up-grid :border="false" col="4">
				<up-grid-item v-for="(listItem,listIndex) in list2" :key="listIndex" @click="click(listItem)">
					<up-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></up-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</up-grid-item>
			</up-grid>
			<view class="action-wrap" v-if="state.token">
				<view class="btn" @click="quit">
					<text>退出登录</text>
				</view>
			</view>
		</view>
		<up-modal :show="showModal" title="联系客服" :content='content' onfirmText="复制" :closeOnClickOverlay="true"
			@close="showModal=false" @confirm="confirm"></up-modal>
	</view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy } = getCurrentInstance()

const showModal = ref(false)
const content = ref('联系客服经理：hahale8888');
// 创建响应式数据  
const list1 = reactive([
	{
		name: '实名认证',
		path: '/pages/mine/real',
		icon: 'http://106.53.65.140:8080/upload/8fbabb3e-8eb5-4af3-ae67-eaa23c00e47c.png',
	}, {
		name: '学历认证',
		path: '/pages/mine/xueli',
		icon: 'http://106.53.65.140:8080/upload/21865799-39da-404e-a466-2729b9ec61ea.png',
	},
	{
		name: '牛人信息',
		path: '/pages/mine/resume',
		icon: 'http://106.53.65.140:8080/upload/88f97e25-744c-48c4-b08f-4bd22f295ef1.png',
	}
])
const list2 = reactive([
	{
		name: 'http://106.53.65.140:8080/upload/8725138f-6c6f-4b4e-8f0c-14d2a1e9f1b2.png',
		title: '基本信息',
		path: '/pages/mine/info',
	},
	{
		name: 'http://106.53.65.140:8080/upload/ff221db6-ce4f-4d0c-9a7d-d934cadfdb60.png',
		title: '联系客服',
		path: '/pages/mine/contract',
	},
	{
		name: 'http://106.53.65.140:8080/upload/ae7dc137-e248-448e-b0a5-96be53235e40.png',
		title: '企业认证',
		path: '/pages/mine/firm',
	},
	{
		name: 'http://106.53.65.140:8080/upload/a4f99e53-d201-4cd1-bcc4-b763bcb15022.png',
		title: '邮寄地址',
		path: '/pages/mine/mail',
	},
	{
		name: 'http://106.53.65.140:8080/upload/84f13415-b7ca-4bf3-b3f7-6c35aa8a2822.png',
		title: '需求管理',
		path: '/pages/mine/demand',
	},
	{
		name: 'http://106.53.65.140:8080/upload/80ed82c5-4a1b-4355-83d1-680d82b0debe.png', // 注意：这里修改了 name 从 'star' 改为 'volume'，以避免列表中两个元素具有相同的 name  
		title: '我的投递',
		path: '/pages/mine/send',
	},
	{
		name: 'http://106.53.65.140:8080/upload/603cdb75-3019-4a10-bcad-db887883a366.png', // 注意：这里修改了 name 从 'star' 改为 'volume'，以避免列表中两个元素具有相同的 name  
		title: '接收简历',
		path: '/pages/mine/rece',
	},
	{
		name: 'http://106.53.65.140:8080/upload/a5e2d213-1db7-425f-a040-da5f99c41b90.png', // 注意：这里修改了 name 从 'star' 改为 'volume'，以避免列表中两个元素具有相同的 name  
		title: '我的订单',
		path: '/pages/mine/order',
	},
]);

const state = reactive({
	info: {
		avatar: "",
		userName: ""
	},
	token: ""
})

// 创建对子组件的引用  
const uToastRef = ref(null);

// 定义方法  
const click = (item) => {
	const token = uni.getStorageSync('token')
	if (!token) {
		uni.reLaunch({ url: '/pages/login' })
		return
	}

	if (item.title == '联系客服') {
		showModal.value = true
		console.log(showModal.value)
		return
	}
	uni.navigateTo({
		url: item.path
	})
};

const confirm = () => {
	uni.setClipboardData({
		data: 'hahale8888',
		success: function (res) {
			uni.getClipboardData({
				success: function (res) {
					uni.showToast({
						icon:'none',
						title: '已复制到剪贴板'
					});
				}
			});
		}
	});
	showModal.value = false
}

function openLogin() {
	uni.navigateTo({
		url: "/pages/login"
	})
}
async function getInfo() {
	const res = await proxy.request('/account/get/user/info', {}, { method: 'GET' })
	console.log(res)
	if (res.data.data && res.data.data.id) {
		state.info = res.data.data
		uni.setStorageSync('user_avatar', res.data.data.avatar)
		uni.setStorageSync('user_name', res.data.data.userName)
	}
}
async function quit() {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录？',
		success: async function (modalRes) {
			if (modalRes.confirm) {
				const res = await proxy.request('/account/out/login', {})
				console.log(res)
				if (res.code == 200) {
					uni.removeStorageSync('token')
					uni.switchTab({
						url: "/pages/index/index"
					})
				}
			} else if (modalRes.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
onShow(() => {
	getInfo()
	state.token = uni.getStorageSync('token')
})
</script>

<style lang="scss">
page {
	background-color: #F5F5F5;
	box-sizing: border-box;
}
</style>

<style lang="scss" scoped>
.content {
	padding: 32rpx;
}

.head-wrap {
	position: relative;

	.bg {
		width: 100%;
		// margin-top: -88rpx;
	}

	&-info {
		position: absolute;
		top: 36rpx;
		left: 32rpx;
		right: 32rpx;

		&-content {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			padding-top: 88rpx;

			&-info_wrap {
				padding-top: 88rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 100%;
				height: 100%;

				&-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					border: 1px solid #ffffff;
					overflow: hidden
				}

				&-name {
					margin-top: 16rpx;
					width: 168rpx;
					height: 52rpx;
					font-family: SF Pro Text, SF Pro Text;
					font-weight: 600;
					font-size: 44rpx;
					color: #FFFFFF;
					line-height: 52rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				&-action {
					margin-top: 88rpx;
					color: #fff;
				}
			}
		}
	}
}

.account-wrap {
	width: 100%;
	height: 140rpx;
	padding: 20rpx;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(222, 222, 222, 0.1);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	border: 2rpx solid;
	border-image: linear-gradient(161deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.28)) 2 2;
}

.account-other-wrap {
	margin-top: 32rpx;
	width: 100%;
	height: 204rpx;
	padding: 32rpx 62rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(222, 222, 222, 0.25);
	border-radius: 12rpx 12rpx 12rpx 12rpx;

	&-list {
		display: flex;
		align-content: center;
		justify-content: space-between;

		&-item {
			text-align: center;

			&-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
			}

			&-text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #323232;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
	}
}

.account-other-features-wrap {
	margin-top: 32rpx;
	width: 100%;
	// height: 540rpx;
	padding: 20rpx;
	padding-bottom: 32rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(222, 222, 222, 0.25);
	border-radius: 12rpx 12rpx 12rpx 12rpx;

	.area {
		display: flex;

		.line {
			width: 8rpx;
			height: 32rpx;
			background: #F2CB51;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		.text {
			margin-left: 20rpx;
			width: 128rpx;
			height: 44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #323232;
			line-height: 38rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}

	.grid-text {
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #323232;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.action-wrap {
		margin-top: 48rpx;
		width: 100%;

		.btn {
			margin: 0 auto;
			width: 480rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 88rpx;
			border: 2rpx dashed #F2CB51;

			text {
				width: 112rpx;
				height: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #F2CB51;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
	}
}
</style>